<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const num = ref('1')
const fl_list = ref([
  {
    image: "/public/images/langer-tx.png",
    title1: "玫瑰",
    title2: "纯洁的爱、美丽的爱情、美好常在",
    text1: "恋人",
    text2: "情侣",
    text3: "伴侣",
    image1: "/public/images/langer1.png",
    image2: "/public/images/langer2.png",
    image3: "/public/images/langer3.png",
    image4: "/public/images/langer4.png",
    price1: "￥234",
    price2: "￥234",
    price3: "￥234",
    price4: "￥234",
  },
  {
    image: "/public/images/langer-tx.png",
    title1: "百合",
    title2: "顺利、心想事成、祝福",
    text1: "恋人",
    text2: "朋友",
    text3: "同事",
    text4: "长辈",
    image1: "/public/images/langer1.png",
    image2: "/public/images/langer2.png",
    image3: "/public/images/langer3.png",
    image4: "/public/images/langer4.png",
    price1: "￥234",
    price2: "￥234",
    price3: "￥234",
    price4: "￥234",
  },
  {
    image: "/public/images/langer-tx.png",
    title1: "康乃馨",
    title2: "思念、祝健康长寿、祝永远美丽",
    text1: "父母",
    text2: "长辈",
    text3: "老师",
    // image1: "/public/images/langer1.png",
    // image2: "/public/images/langer2.png",
    // image3: "/public/images/langer3.png",
    // image4: "/public/images/langer4.png",
    // price1: "￥234",
    // price2: "￥234",
    // price3: "￥234",
    // price4: "￥234",
  },
  {
    image: "/public/images/langer-tx.png",
    title1: "向日葵",
    title2: "信念、光辉、忠诚、爱慕",
    text1: "恋人",
    text2: "朋友",
    text3: "同事",
    text4: "长辈",
    // image1: "/public/images/langer1.png",
    // image2: "/public/images/langer2.png",
    // image3: "/public/images/langer3.png",
    // image4: "/public/images/langer4.png",
    // price1: "￥234",
    // price2: "￥234",
    // price3: "￥234",
    // price4: "￥234",
  },
])

const back = () => {
  console.log('1234')
  router.go(-1);
}
</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>花语大全</div>
      </div>
      <div class="navBox_title_but">
        <div :class="num == 1 ? 'active' : 'but'" @click="num = 1">花材</div>
        <div :class="num == 2 ? 'active' : 'but'" @click="num = 2">枝数</div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="fl_Box">
      <div class="fl_Box_top">
        <van-search placeholder="请输入关键词" shape="round" />
        <div class="fl_Box_top_font">搜索</div>
      </div>
      <div class="fl_Box_bottom">
        <!-- 根据num动态切换显示div内容 -->
        <div v-show="num == 1">
          <div class="fl_Box_bottom_left" v-for="(item,index) in fl_list" :key="index">
            <div class="fl_Box_bottom_left_top">
              <div class="fl_Box_bottom_left_top1">
                <img :src="item.image" alt="">
              </div>
              <div class="fl_Box_bottom_left_top2">
                <div class="left_font1">{{ item.title1 }}</div>
                <div class="left_font2">{{ item.title2 }}<van-icon name="arrow" style="float: right;"/></div>
                <div class="left_font3">
                  <text>{{ item.text1 }}</text><text>{{ item.text2 }}</text>
                  <text>{{ item.text3 }}</text><text v-show="item.text4">{{ item.text4 }}</text>
                </div>
              </div>
            </div>
            <div class="fl_Box_bottom_left_bottom" v-show="item.image1">
              <div class="fl_Box_bottom_left_bottom1">
                <div><img :src="item.image1" alt=""></div>
                <div>{{ item.price1 }}</div>
              </div>
              <div class="fl_Box_bottom_left_bottom1">
                <div><img :src="item.image2" alt=""></div>
                <div>{{ item.price2 }}</div>
              </div>
              <div class="fl_Box_bottom_left_bottom1">
                <div><img :src="item.image3" alt=""></div>
                <div>{{ item.price3 }}</div>
              </div>
              <div class="fl_Box_bottom_left_bottom1">
                <div><img :src="item.image4" alt=""></div>
                <div>{{ item.price4 }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="num == 2">枝数2233</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {
  .navBox {
    height: 150px;
    background-image: url('/public/images/flower-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 150px;

    .navBox_title {
      color: #fff;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }

    .navBox_title_but {
      border: 1px solid #fff;
      width: 55%;
      margin: 25px auto 0;
      border-radius: 50px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;

      .but {
        width: 50%;
        text-align: center;
        color: #fff;
        padding: 5px 10px;
        box-sizing: border-box;
      }

      .active {
        width: 50%;
        text-align: center;
        color: #f96e75;
        line-height: 30px;
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }

  .fl_Box {
    background-color: #f6f6f6;
    height: 100vh;
    border-radius: 10px 10px 0 0;
    margin-top: -10px;
    padding: 15px;
    box-sizing: border-box;

    .fl_Box_top {
      position: relative;
      margin-bottom: 20px;

      .fl_Box_top_font {
        height: 34px;
        background-color: #f96e75;
        color: #fff;
        width: 70px;
        line-height: 34px;
        text-align: center;
        border-radius: 0 20px 20px 0;
        font-size: 12px;
        padding: 0 10px;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .van-search {
        padding: 0;
        border-radius: 20px;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #ccc;
      }
    }

    .fl_Box_bottom {

      .fl_Box_bottom_left {
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        box-shadow: 0 1px 1px #ccc;
        padding: 10px;
        box-sizing: border-box;
        .fl_Box_bottom_left_top{
          display: flex;
          padding-bottom: 15px;
          box-sizing: border-box;
          .fl_Box_bottom_left_top1{
            width: 25%;
            img{
              width: 70px;

            }
          }
          .fl_Box_bottom_left_top2{
            width: 75%;
            .left_font1{
              font-weight: bold;
            }
            .left_font2{
              color: #696969;
              font-size: 14px;
              margin: 8px 0;
            }
            .left_font3{
              text{
                border: 1px solid #a7a6a6;
                color: #a7a6a6;
                font-size: 12px;
                padding: 2px 10px;
                border-radius: 25px;
                margin-right: 5px;
              }
            }
          }
        }
        .fl_Box_bottom_left_bottom{
          border-top: 1px solid #ccc;
          padding-top: 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .fl_Box_bottom_left_bottom1{
            width: 22%;
            text-align: center;
            img{
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>